﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有道banner-swiper</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="youdaoBanner" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="info"><div class="date">2017/11/14</div>
                            <h3><a href="javascript:void(0);">GET2017教育大会 周枫：在线教育迎来大IP时代</a></h3>
                            <p>11月14日，GET2017教育科技大会在京开幕，国内知名教育机构悉数亮相。网易有道CEO周枫在领袖论坛…</p>
                            <a href="javascript:void(0);" class="btn">详情</a>
            </div>
        </div>                                
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>
<script src="js/swiper.min.js"></script>
<script>        
  var ydSwiper = new Swiper ('#youdaoBanner', {
    centeredSlides : true,
	slidesPerView : 'auto',
	spaceBetween : 40,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })        
</script>
</body>
</html>
